---
title: ECMAScript补漏

pubDatetime: 2023-08-30T02:36:27Z
postSlug: es6-plus
featured: false
draft: false
tags:
  - javascript
  - es6
  - mdn
description: "more details about es"
---

## 目录

## Array reduce

### 基本语法

```js
[1,2,3,4].reduce((a,b,c,d)=>{
    console.log(a,b,c,d);
     return a+b;
     },0);

0 1 0 (4) [1, 2, 3, 4]
1 1 2 1 (4) [1, 2, 3, 4]
1 3 3 2 (4) [1, 2, 3, 4]
1 6 4 3 (4) [1, 2, 3, 4]
```

```js
let a = [1, 2, 3, 4];
let b = a.reduce((a, b, c, d) => {
  return a + b;
}, 0);
console.log(b);
//10
```

### ecma 原文

> `callbackfn` should be a function that takes four arguments. reduce calls the callback, as a
> function, once for each element after the first element present in the array, in ascending order.

> `callbackfn` is called with four arguments: the previousValue (value from the previous call to
> `callbackfn`), the currentValue (value of the current element), the currentIndex, and the object
> being traversed. The first time that callback is called, the previousValue and currentValue can
> be one of two values. If an initialValue was supplied in the call to reduce, then previousValue
> will be equal to initialValue and currentValue will be equal to the first value in the array. If no
> initialValue was supplied, then previousValue will be equal to the first value in the array and
> currentValue will be equal to the second. It is a TypeError if the array contains no elements
> and initialValue is not provided.

> reduce does not directly mutate the object on which it is called but the object may be mutated by the calls
> to `callbackfn`.

> The range of elements processed by reduce is set before the first call to `callbackfn`. Elements that are
> appended to the array after the call to reduce begins will not be visited by `callbackfn`. If existing elements
> of the array are changed, their value as passed to `callbackfn` will be the value at the time reduce visits
> them; elements that are deleted after the call to reduce begins and before being visited are not visited.

## [String.prototype.localeCompare](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)

localeCompare 方法是 JavaScript 字符串对象的一个方法，用于比较两个字符串的大小。它主要用于比较字符串的 Unicode 值，以便在某些语言环境下进行排序。

localeCompare 方法的语法如下：

```js
str1.localeCompare(str2, [locale, [options]]);
```

其中，str1 和 str2 是需要比较的两个字符串。locale 是一个可选参数，表示用于比较字符串的语言环境。options 是一个可选参数，表示用于比较字符串的选项。

localeCompare 方法的返回值是一个整数，表示两个字符串的大小关系：

如果第一个字符串大于第二个字符串，则返回正数。
如果第一个字符串小于第二个字符串，则返回负数。
如果两个字符串相等，则返回 0。
例如，以下代码将比较两个字符串的大小：

```js
const str1 = "apple";
const str2 = "banana";

const result = str1.localeCompare(str2, "en-US");

if (result > 0) {
  console.log(str1 + " is greater than " + str2);
} else if (result < 0) {
  console.log(str1 + " is less than " + str2);
} else {
  console.log(str1 + " is equal to " + str2);
}
```

在这个例子中，我们使用了 'en-US' 作为语言环境参数。这将根据英语的规则对 str1 和 str2 进行排序。如果需要使用其他语言环境进行比较，可以将其传递给 localeCompare 方法。

需要注意的是，localeCompare 方法比较的是字符串的 Unicode 值，而不是它们在屏幕上的显示顺序。因此，它可能会受到字符串的字体和显示设置的影响。

## [Array.prototype.flatMap()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

flatMap 方法接受一个回调函数作为参数，该回调函数用于处理数组中的每个元素，并返回一个新的数组。flatMap 方法会遍历数组中的每个元素，并将回调函数返回的数组中的所有元素合并为一个新数组。

flatMap 方法返回的新数组中的元素顺序与原始数组中的元素顺序相同。如果回调函数返回的数组中的元素不是数组类型，那么它们将被添加到新数组中，而不是将它们作为一个数组添加到新数组中。

以下是一个 flatMap 方法的示例：

```js
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.flatMap(number => [number * 2, number * 3]);

console.log(doubledNumbers); // [2, 4, 6, 8, 10, 3, 6, 9, 12, 15]
```

在这个示例中，我们有一个名为 numbers 的数组，其中包含一些整数。我们使用 flatMap 方法将 numbers 数组中的每个元素乘以 2 或 3，然后将结果作为一个新数组返回。最后，我们将新数组 doubledNumbers 输出到控制台。

总之，flatMap 方法用于对数组进行变换操作，将数组中的每个元素转换为一个新数组，并将新数组中的所有元素合并为一个新数组。

**flatMap() 方法是一个迭代方法。有关回调函数的详细说明，请参见 Array.prototype.map()。flatMap() 方法等同于调用 map(callbackFn, thisArg) 后再调用 flat(1)——对于每个元素，它都会生成一个新元素数组，并将生成的数组连接起来形成一个新数组。**

## ecma2023

### 1.findLast and findLastIndex

```js
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast(element => element > 45);
console.log(found);
```

### 2.new Array methods

- [toReversed()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed)

```js
const months = ["January", "February", "March", "April", "May"];
//using toReversed()
const reversedMonths = months.toReversed();
console.log(months); // ['January', 'February', 'March', 'April', 'May']; // Original array remains unchanged
console.log(reversedMonths); // ['May', 'April', 'March', 'February', 'January'];
```

- toSorted()

- [toSpliced()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced)

```js
const months = ["Jan", "Mar", "Apr", "May"];

// 在索引 1 处添加一个元素
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]

// 从第 2 个索引开始删除两个元素
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]

// 在索引 1 处用两个新元素替换一个元素
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]

// 原数组不会被修改
console.log(months); // ["Jan", "Mar", "Apr", "May"]
```

- [width](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/with)

> with() 通过返回一个指定索引处的值被新值替换的新数组，来改变数组中指定索引处的值。原数组不会被修改。这使得你可以以链式调用数组方法的方式来对数组进行操作

```js
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
```

### 3.[hashbang grammer](https://github.com/tc39/proposal-hashbang)

[mdn hashbang_comments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#hashbang_comments)

<details>
<summary>2023/1/3 什么是hashbang_comments</summary>
<blockquote>
`hashbang`（也称为 "shebang"）在编程中指的是 `#!`，它出现在脚本文件的第一行，用于指定脚本的解释器。

在 Web 开发中，特别是在早期，`hashbang`被广泛用于指定前端框架或工具，如 JavaScript 库或框架，来处理单页面应用（SPA）的路由。当用户在浏览器中访问一个带有 `hashbang` 的 URL 时（如 `http://example.com/#!/path/to/resource`），浏览器会忽略 `#!` 之后的内容，并且只请求 `http://example.com/`。然后，JavaScript 会解析 `#!/path/to/resource` 并相应地更新页面内容，而不刷新整个页面。

例如，使用这样的 URL 可以使得 JavaScript 应用在浏览器中更加平滑地进行导航，而不需要整个页面的重新加载。

然而，随着时间的推移和 Web 标准的发展，`hashbang` 的使用逐渐减少，并被 HTML5 的`pushState`和`replaceState`方法以及新的路由管理库（如 React Router 或 Vue Router）所取代。

至于 `hashbang_comments`，这可能是一个特定的标记或指示符，但在标准的 Web 开发文献或实践中并不常见。如果你遇到了这个术语，最好参考具体的上下文或来源来了解其具体含义。

</blockquote>

</details>

### 4. Symbol as WeakMap keys

```js
//using WeakMap and symbol
const privateData = new WeakMap();
const obj = { label: "Private data" };

const key = Symbol("privateKey"); // Create a unique Symbol as the key
privateData.set(key, obj); // Use the Symbol key to associate private data
console.log(privateData.get(key)); // Output: {label:'Private data'}
```

<details>
<summary>2023/1/3 WeakMap</summary>
<blockquote>
`WeakMap` 是 JavaScript 的一个内置对象，用于存储键值对，其中键是对象，而值可以是任意类型的值。与普通的 `Map` 对象不同，`WeakMap` 的键是弱引用的，这意味着当键对象不再被引用时，它会被垃圾回收，这有助于避免内存泄漏。

以下是关于 `WeakMap` 的一些关键点：

1. **键是弱引用的**：如果一个键对象没有其他引用，那么它可能会被垃圾回收，这将导致该键值对从 `WeakMap` 中自动删除。

2. **不可迭代**：由于 `WeakMap` 的键是弱引用的，所以不能像 `Map` 那样迭代它们，也没有公开的方法或属性来获取所有键。

3. **用途**：`WeakMap` 主要用于在不干扰垃圾回收的情况下存储对象与相关数据，或者在某些情况下需要确保对象被垃圾回收的场景中。

4. **方法**：`WeakMap` 提供了 `get(key)`、`set(key, value)`、`has(key)` 和 `delete(key)` 方法，与 `Map` 的方法类似。

使用示例：

```javascript
let weakMap = new WeakMap();
let obj = {};

// 设置键值对
weakMap.set(obj, "value");

// 获取值
console.log(weakMap.get(obj)); // 输出 "value"

// 检查键是否存在
console.log(weakMap.has(obj)); // 输出 true

// 删除键值对
weakMap.delete(obj);

// 再次检查键是否存在
console.log(weakMap.has(obj)); // 输出 false
```

总之，`WeakMap` 提供了一种方式来存储对象与数据的关联，同时确保当对象不再被引用时，相关数据也可以被垃圾回收。

</blockquote>
</details>

## 链接

- [findLast](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast)
- [WeakMap](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)
